<?php
/**
 * 客户评价组件
 * 用于展示来自客户的真实评价和反馈
 */
$configKey = isset($configKey) ? $configKey : 'testimonials';
// 从页面配置获取评价组件配置，使用默认值作为后备
$data = array_merge([
    'section_id' => 'testimonials',
    'section_pretitle' => '客户评价',
    'section_title' => '他们对我们的评价',
    'section_subtitle' => '来自各行业客户的真实反馈，见证我们的服务质量和专业能力',
    'layout' => 'grid', // grid 或 carousel
    'columns' => '3', // 1-3列（网格布局时有效）
    'card_style' => 'modern', // modern, classic, minimal
    'show_navigation' => true,
    'show_pagination' => true,
    'items' => []
], $pageConfig['components'][$configKey] ?? []);

// 处理布局和样式类
$columnClasses = [
    '1' => 'grid-cols-1',
    '2' => 'grid-cols-1 md:grid-cols-2',
    '3' => 'grid-cols-1 md:grid-cols-3'
];
$columnClass = $columnClasses[$data['columns']] ?? $columnClasses['3'];

?>

<!-- 客户评价区域 -->
<section id="<?= $data['section_id'] ?>" class="py-20">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 区域标题 -->
        <div class="text-center max-w-3xl mx-auto mb-16">
            <?php if (!empty($data['section_pretitle'])): ?>
                <span class="inline-block text-sm font-semibold text-primary uppercase tracking-wider mb-2">
                    <?php echo $data['section_pretitle']; ?>
                </span>
            <?php endif; ?>
            
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                <?php echo $data['section_title']; ?>
            </h2>
            
            <?php if (!empty($data['section_subtitle'])): ?>
                <p class="text-lg text-gray-600">
                    <?php echo $data['section_subtitle']; ?>
                </p>
            <?php endif; ?>
        </div>

        <!-- 评价容器 -->
        <div class="relative">
            <?php if ($data['layout'] === 'carousel'): ?>
                <!-- 轮播布局 -->
                <div class="testimonial-carousel overflow-hidden">
                    <div class="flex transition-transform duration-500 ease-in-out" id="testimonial-slider">
                        <?php foreach ($data['items'] as $testimonial): ?>
                            <div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0 px-4">
                                <?php 
                                // 传递当前评价数据到卡片组件
                                $testimonialsConfig = $data; 
                                include 'testimonial-card.php'; 
                                ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                
                <!-- 轮播导航按钮 -->
                <?php if ($data['show_navigation'] && count($data['items']) > 1): ?>
                    <button id="prev-testimonial" class="absolute top-1/2 left-0 -translate-y-1/2 -translate-x-1/2 md:translate-x-0 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary z-10">
                        <i class="fa fa-chevron-left"></i>
                    </button>
                    <button id="next-testimonial" class="absolute top-1/2 right-0 -translate-y-1/2 translate-x-1/2 md:translate-x-0 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary z-10">
                        <i class="fa fa-chevron-right"></i>
                    </button>
                <?php endif; ?>
            <?php else: ?>
                <!-- 网格布局 -->
                <div class="grid <?php echo $columnClass; ?> gap-8">
                    <?php foreach ($data['items'] as $testimonial): ?>
                        <?php 
                        // 传递当前评价数据到卡片组件
                        $testimonialsConfig = $data; 
                        include 'testimonial-card.php'; 
                        ?>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>

            <!-- 分页指示器 -->
            <?php if ($data['show_pagination'] && count($data['items']) > 1): ?>
                <div class="flex justify-center mt-8 gap-2" id="testimonial-pagination">
                    <?php foreach ($data['items'] as $index => $testimonial): ?>
                        <button 
                            class="w-3 h-3 rounded-full bg-primary/30 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-all duration-300 <?php echo $index === 0 ? 'bg-primary w-6' : ''; ?>" 
                            aria-label="查看第<?php echo $index + 1; ?>条评价"
                            data-index="<?php echo $index; ?>"
                        ></button>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- 轮播功能脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 轮播功能仅在布局为carousel时启用
    <?php if ($data['layout'] === 'carousel'): ?>
        const slider = document.getElementById('testimonial-slider');
        const prevBtn = document.getElementById('prev-testimonial');
        const nextBtn = document.getElementById('next-testimonial');
        const pagination = document.querySelectorAll('#testimonial-pagination button');
        const slides = slider.children;
        const slideCount = slides.length;
        let currentIndex = 0;
        let slideWidth = 100; // 百分比
        
        // 根据屏幕尺寸调整可见幻灯片数量
        function updateSlideWidth() {
            if (window.innerWidth >= 1024) {
                slideWidth = 100 / 3; // 大屏幕显示3个
            } else if (window.innerWidth >= 768) {
                slideWidth = 50; // 中屏幕显示2个
            } else {
                slideWidth = 100; // 小屏幕显示1个
            }
            updateSliderPosition();
        }
        
        // 更新轮播位置
        function updateSliderPosition() {
            slider.style.transform = `translateX(-${currentIndex * slideWidth}%)`;
            
            // 更新分页状态
            pagination.forEach((btn, index) => {
                if (index === currentIndex) {
                    btn.classList.add('bg-primary', 'w-6');
                    btn.classList.remove('bg-primary/30', 'w-3');
                } else {
                    btn.classList.remove('bg-primary', 'w-6');
                    btn.classList.add('bg-primary/30', 'w-3');
                }
            });
        }
        
        // 上一张
        function prevSlide() {
            currentIndex = Math.max(0, currentIndex - 1);
            updateSliderPosition();
        }
        
        // 下一张
        function nextSlide() {
            const maxIndex = window.innerWidth >= 1024 ? 
                slideCount - 3 : window.innerWidth >= 768 ? 
                slideCount - 2 : slideCount - 1;
            currentIndex = Math.min(maxIndex, currentIndex + 1);
            updateSliderPosition();
        }
        
        // 绑定事件
        if (prevBtn) prevBtn.addEventListener('click', prevSlide);
        if (nextBtn) nextBtn.addEventListener('click', nextSlide);
        
        pagination.forEach(btn => {
            btn.addEventListener('click', () => {
                currentIndex = parseInt(btn.dataset.index);
                updateSliderPosition();
            });
        });
        
        // 窗口大小变化时重新计算
        window.addEventListener('resize', updateSlideWidth);
        
        // 初始化
        updateSlideWidth();
    <?php endif; ?>
});
</script>
    